<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>旅游主题</title>
    <link rel="stylesheet" href="sider.css">
</head>

<body>
    <div class="page">
        <div class="sidebar">
            <h2>橙子之家</h2>
            <a href="home.html">首页</a>
            <a href="pageOne.html">栽培技术</a>
            <a href="pageTwo.html">药用价值</a>
            <a href="PageThree.html">相关知识</a>
            <a href="PageFour.html">新鲜橙子</a>
            <a href="pageFive.html">留言板</a>
        </div>

        <div class="content">
            <!-- 使用表单实现留言板区域 -->
            <form action="">
                <h1>留言板</h1>
                <br>
                <p>留下亲的宝贵意见，我们会成长的更健康！</p>
                <br>
                <label for="name">name:</label><br>
                <input type="text" id="name" name="name" placeholder="请输入您的姓名"><br>
                <label for="email">Email:</label><br>
                <input type="text" id="email" name="email" placeholder="请输入您的邮箱地址"><br>
                <label for="phone">电话:</label><br>
                <input type="text" id="phone" name="phone" placeholder="请输入您的联系电话"><br>
                <label for="message">留言内容:</label><br>
                <textarea id="message" name="message" class="my-textarea"></textarea><br>
                <div class="btn">
                    <button type="submit">提交</button>
                    <button type="reset">重置</button>
                </div>
            </form>
            <!-- 右侧图片区域 -->
            <div class="img-box">
                <p>橙子之家</p>
                <img src="./assert/img/origin1.jpg" alt="橙子之家">
            </div>
        </div>
    </div>
</body>

<style>
    .page {
        display: flex;
        background-color: #faf7ef;
    }

    .content {
        background: url(./assert/img/bg3.png) no-repeat center;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    form {
        width: 30%;
        margin-right: 5%;
        padding: 5px;
    }

    input[type=text] {
        width: 60%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: 1px solid #ccc;
    }

    p {
        font-size: 28px;
        font-weight: lighter;
    }

    .my-textarea {
        height: 200px;
        /* 设置高度 */
        width: 100%;
        /* 设置宽度 */
        resize: none;
        /* 禁用拖动调整大小 */
        border: 1px solid #ccc;
    }

    .btn {
        display: flex;
        justify-content: space-between;
    }

    button {
        background-color: orange;
        color: white;
        padding: 14px 20px;
        margin: 8px 0;
        border: none;
        cursor: inline-block;
        width: 16%;
    }

    .img-box {
        width: 30%;
        height: 50%;
        display: inline-block;
        justify-content: center;
        align-items: center;
    }

    .img-box img {
        margin-top: 6%;
        width: 100%;
        height: 80%;
        object-fit: cover;
    }
</style>

</html>